<main id="costItemUnit" class="mlr-24">
  <hl-page-header title="系统配置-招商配置-意向面积"></hl-page-header>
  <section class="br-4 flow-list-container line-height-40 global_table"
    style="border:1px solid #E5E5E5;margin-top: 15px">
    <div class="dy-flex border-b text-center global_table_title">
      <div class="dy-fx-1">序</div>
      <div class="dy-fx-3">面积(m²)</div>
      <div class="dy-fx-1">状态</div>
      <div class="dy-fx-1 border-l">操作</div>
    </div>
    <div>
      <ul class="dy-flex  text-center global_table_item" v-for="(item,index) in unitList"
        style="margin:0">
        <li class="dy-fx-1">{{index+1}}</li>
        <li class="dy-fx-3">
          <span v-if="!item.isEdit">{{item.dictName}}</span>
          <input v-if="item.isEdit" type="text" v-model="item.dictName">
          <span v-if="!item.isEdit" class="icon-Gm-edit" @click="item.isEdit = !item.isEdit"></span>
          <span v-if="item.isEdit" class="icon-Gm-confirm" @click="sureEdit(item)"></span>
        </li>
        <li class="dy-fx-1">{{item.status == 'Y'?'启用':'停用'}}</li>
        <li class="dy-fx-1 border-l operateArea">
          <span @click="switchFunc(item)">{{item.status == 'Y'?'停用':'启用'}}</span>
          <span @click="deleteItem(item)">删除</span>
        </li>
      </ul>
      <ul class="dy-flex  text-center global_table_item" v-if="isNewAdd">
        <li class="dy-fx-1">{{unitList.length+1}}</li>
        <li class="dy-fx-3">
          <input type="text" v-model="newValue">
          <span class="icon-Gm-confirm" @click="newAdd"></span>
        </li>
        <li class="dy-fx-1">启用</li>
        <li class="dy-fx-1 border-l operateArea">
          <span style="color:#666">停用</span>
          <span @click="isNewAdd = false">删除</span>
        </li>
      </ul>
    </div>

  </section>
  <hl-button size="mini" @on-click="newAddBut" class="mtb-10">新增</hl-button>
</main>

<style media="screen">
  .title {
    line-height: 56px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 16px;
    color: #999;
  }

  .operateArea span {
    color: #337AB7;
    font-size: 14px;
    margin: 0 10px;
    cursor: pointer;
  }

  .global_table_title div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  input {
    width: 200px;
    height: 34px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
    border-radius: 4px;
    border: 1px solid rgba(229, 229, 229, 1);
    outline: none;
    text-indent: 5px;
  }

  .btn {
    margin-top: 12px;
  }
</style>

<script src="modules/system_config/scripts/intentionalArea.js" charset="utf-8"></script>
